<template>
  <view class="user-page">
    <view class="user-info dpr-center-sb">
      <view class="dpr-center-start pa-4">
        <nut-avatar size="68" :url="userInfo.avatar" />
        <view>
          <view>
            <text class="nickname">{{ userInfo.nickname || '未登录' }}</text>
          </view>
          <view>
            <text class="mobile">{{ userInfo.mobile || '未设置' }}</text>
          </view>
        </view>
      </view>
      <nut-icon name="setting" color="white" size="20" class="setting" @click="toUserSetting" />
    </view>
    <view class="user-head-card">
      <view class="grid">
        <nut-grid :column-num="3" style="padding: 5px" square :border="false">
          <nut-grid-item
            icon="cart"
            icon-size="24"
            text="我的选品"
            @click="Taro.navigateTo({ url: '/pages/user/cart/index' })"
          ></nut-grid-item>
          <nut-grid-item
            icon="notice"
            icon-size="24"
            text="消息通知"
            @click="Taro.navigateTo({ url: '/pages/user/message/index' })"
          ></nut-grid-item>
          <nut-grid-item icon="scan" text="我的钱包" @click="Taro.navigateTo({ url: '/pages/user/wallet/index' })">
            <template #icon>
              <nut-icon font-class-name="iconfont" class-prefix="icon" size="28" name="qianbao1" />
            </template>
          </nut-grid-item>
        </nut-grid>
      </view>
      <view class="order-tab">
        <view class="dpr-center-sb px-2" @click="Taro.navigateTo({ url: '/pages/order/index' })">
          <text>领样订单</text>
          <nut-icon name="right" size="12" />
        </view>
        <nut-grid :column-num="5" square :border="false">
          <nut-grid-item text="待审核">
            <template #icon>
              <text>0</text>
            </template>
          </nut-grid-item>
          <nut-grid-item text="待发货">
            <template #icon>
              <text>0</text>
            </template>
          </nut-grid-item>
          <nut-grid-item text="待收货">
            <template #icon>
              <text>0</text>
            </template>
          </nut-grid-item>
          <nut-grid-item text="待完成">
            <template #icon>
              <text>0</text>
            </template>
          </nut-grid-item>
          <nut-grid-item text="已完成">
            <template #icon>
              <text>0</text>
            </template>
          </nut-grid-item>
        </nut-grid>
      </view>
      <view class="more-grid">
        <nut-grid :column-num="4" square :border="false">
          <nut-grid-item
            icon="footprint"
            icon-size="20"
            text="浏览记录"
            @click="Taro.navigateTo({ url: '/pages/user/history/index' })"
          ></nut-grid-item>
          <nut-grid-item
            icon="star"
            icon-size="20"
            text="我的收藏"
            @click="Taro.navigateTo({ url: '/pages/user/collect/index' })"
          ></nut-grid-item>
          <nut-grid-item
            icon="github"
            icon-size="20"
            text="开发购买"
            @click="showBuyAndDevPopup = true"
          ></nut-grid-item>
          <nut-grid-item
            icon="ask2"
            icon-size="20"
            text="帮助中心"
            @click="Taro.navigateTo({ url: '/pages/help/index' })"
          ></nut-grid-item>
        </nut-grid>
      </view>
      <view class="dpr-center-center pt-4">
        <nut-button size="small" class="contact-button" open-type="contact">平台客服</nut-button>
      </view>
      <nut-popup
        v-model:visible="showBuyAndDevPopup"
        round
        duration="0.5"
        closeable
        position="bottom"
        safe-area-inset-bottom
        z-index="99999"
      >
        <view class="pa-4">
          <mark-card title="开发与合作">
            <view>
              <text>我们可以为机构提供定制化开发和私有化部署，欢迎合作！</text>
            </view>
            <nut-button type="info" class="full-width mt-4" open-type="contact">联系平台</nut-button>
          </mark-card>
        </view>
      </nut-popup>
    </view>
  </view>
</template>

<script setup lang="ts">
import './index.less';
import { onMounted, ref } from 'vue';
import Taro, { useDidShow } from '@tarojs/taro';
import { getPersonalInfoApi } from '@/api/user';
import MarkCard from '@/components/mark-card/index.vue';

const showBuyAndDevPopup = ref(false);
const visible = ref(false);
const userInfo = ref({});
const toUserSetting = () => {
  Taro.navigateTo({ url: '/pages/user/setting/index' });
};
const getUserInfo = () => {
  getPersonalInfoApi({}).then((res) => {
    if (!res.result) {
      visible.value = true;
    }
    userInfo.value = res.result;
  });
};

useDidShow(() => {
  getUserInfo();
});
</script>
